import { Col, Row } from 'antd';
import EchartsMap from './EchartsMap';
import PieChart from './PieChart';
import DateData from './DateData';
import TotalData from './TotalData';
import FaultCount from './FaultCount';
import OilConsumption from './OilConsumption';
import Ranking from './Ranking';
import { useEffect, useState } from 'react';
import {
  getCategoryMachine,
  getOperateAreaData,
  getCumulativeWarnings,
  getCumulativeAlarms,
} from '@/services/api/home';
function getNumber(num: number) {
  return Number.isInteger(num) ? num : num.toFixed(2) || 0;
}
const style: React.CSSProperties = {
  // padding: '0px 13px 0 17px',
};
export default () => {
  let [pieChartOptions1, setPieChartOptions1] = useState({});
  let [pieChartOptions2, setPieChartOptions2] = useState({});
  let [pieChartOptions3, setPieChartOptions3] = useState({});
  let [pieChartOptions4, setPieChartOptions4] = useState({});
  const color = ['#4890FF', '#52CCA3', '#B6D3FF', '#FFCC4A', '#6C81F9'];
  const getTableHeader1 = async () => {
    const res = await getCategoryMachine();
    let { result } = res;
    setPieChartOptions1({
      title: {
        text: '农机类型',
        left: 20,
        top: 24,
        textStyle: {
          fontSize: 22,
        },
      },
      tooltip: {
        trigger: 'item',
        // show: true,
        // triggerOn: 'mouseover',
      },
      legend: {
        orient: 'vertical',
        right: 20,
        top: 80,
        textStyle: {
          fontSize: 16,
          lineHeight: 24,
        },
      },
      series: [
        {
          name: '占有百分比',
          type: 'pie',
          radius: [40, 77],
          center: ['35%', '40%'],
          selectedMode: false,
          selectedOffset: 10,
          avoidLabelOverlap: false,
          left: 32,
          top: 90,
          label: {
            show: true,
            position: 'inside',
            formatter: '{c}%',
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 16,
          },
          emphasis: {
            scale: true,
            scaleSize: 18,
            label: {
              show: false,
            },
          },
          labelLine: {
            show: false,
          },
          data: result.map((item: any, index: number) => ({
            ...item,
            value: getNumber(item.percent),
            name: item.typeName,
            itemStyle: { color: color[index] },
          })),
          z: 2,
        },
      ],
    });
  };
  const getTableHeader2 = async () => {
    const res = await getOperateAreaData();
    let { result } = res;
    setPieChartOptions2({
      title: {
        text: '作业面积',
        left: 20,
        top: 24,
        textStyle: {
          fontSize: 22,
        },
      },
      tooltip: {
        trigger: 'item',
        // triggerOn: 'mouseover',
      },
      legend: {
        orient: 'vertical',
        right: 20,
        top: 80,
        textStyle: {
          fontSize: 16,
          lineHeight: 24,
        },
      },
      series: [
        {
          name: '占有百分比',
          type: 'pie',
          radius: [40, 77],
          center: ['35%', '40%'],
          selectedMode: false,
          selectedOffset: 10,
          avoidLabelOverlap: false,
          left: 32,
          top: 90,
          label: {
            show: true,
            position: 'inside',
            formatter: '{c}%',
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 16,
          },
          emphasis: {
            scale: true,
            scaleSize: 18,
            label: {
              show: false,
            },
          },
          labelLine: {
            show: false,
          },
          data: result.map((item: any, index: number) => ({
            ...item,
            value: getNumber(item.areaProportion),
            name: item.machineType,
            itemStyle: { color: color[index] },
          })),
          z: 2,
        },
      ],
    });
  };
  const getTableHeader3 = async () => {
    const res = await getCumulativeWarnings();
    let { result } = res;
    setPieChartOptions3({
      title: {
        text: '报警类型',
        left: 20,
        top: 24,
        textStyle: {
          fontSize: 22,
        },
      },
      tooltip: {
        trigger: 'item',
        // triggerOn: 'mouseover',
      },
      legend: {
        orient: 'vertical',
        right: 20,
        top: 80,
        textStyle: {
          fontSize: 16,
          lineHeight: 24,
        },
      },
      series: [
        {
          name: '占有百分比',
          type: 'pie',
          radius: [40, 77],
          center: ['35%', '40%'],
          selectedMode: false,
          selectedOffset: 10,
          avoidLabelOverlap: false,
          left: 32,
          top: 90,
          label: {
            show: true,
            position: 'inside',
            formatter: '{c}%',
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 16,
          },
          emphasis: {
            scale: true,
            scaleSize: 18,
            label: {
              show: false,
            },
          },
          labelLine: {
            show: false,
          },
          data: result.map((item: any, index: any) => ({
            ...item,
            value: getNumber(item.percent),
            name: item.typeName,
            itemStyle: { color: color[index] },
          })),
          z: 2,
        },
      ],
    });
  };
  const getTableHeader4 = async () => {
    const res = await getCumulativeAlarms();
    let { result } = res;
    setPieChartOptions4({
      title: {
        text: '故障分类',
        left: 20,
        top: 24,
        textStyle: {
          fontSize: 22,
        },
      },
      tooltip: {
        trigger: 'item',
        // triggerOn: 'mouseover',
      },
      legend: {
        orient: 'vertical',
        right: 20,
        top: 80,
        textStyle: {
          fontSize: 16,
          lineHeight: 24,
        },
      },
      series: [
        {
          name: '占有百分比',
          type: 'pie',
          radius: [40, 77],
          center: ['35%', '40%'],
          selectedMode: false,
          selectedOffset: 10,
          avoidLabelOverlap: false,
          left: 32,
          top: 90,
          label: {
            show: true,
            position: 'inside',
            formatter: '{c}%',
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 16,
          },
          emphasis: {
            scale: true,
            scaleSize: 18,
            label: {
              show: false,
            },
          },
          labelLine: {
            show: false,
          },
          data: result.map((item: any, index: any) => ({
            ...item,
            value: getNumber(item.percent),
            name: item.typeName,
            itemStyle: { color: color[index] },
          })),
          z: 2,
        },
      ],
    });
  };
  useEffect(() => {
    getTableHeader1();
    getTableHeader2();
    getTableHeader3();
    getTableHeader4();
  }, []);
  return (
    <div style={style}>
      <Row gutter={[16, 24]} justify="space-between">
        <Col span={18}>
          <DateData />
        </Col>
        <Col span={6}>
          <TotalData />
        </Col>
      </Row>
      <Row gutter={[16, 24]} justify="space-between">
        {/* {pieChartOptions.map((item, index) => {
          return (
            <Col span={6} key={index}>
              <div style={style}>
                <PieChart op={item} />
              </div>
            </Col>
          );
        })} */}
        <Col span={6}>
          <PieChart op={pieChartOptions1} />
        </Col>
        <Col span={6}>
          <PieChart op={pieChartOptions2} />
        </Col>
        <Col span={6}>
          <PieChart op={pieChartOptions3} />
        </Col>
        <Col span={6}>
          <PieChart op={pieChartOptions4} />
        </Col>
      </Row>
      <Row gutter={[16, 24]} justify="space-between">
        <Col span={12}>
          <Row gutter={16}>
            <Col span={24}>
              <FaultCount />
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <OilConsumption />
            </Col>
          </Row>
        </Col>
        <Col span={12}>
          <Row gutter={16}>
            <Col span={15}>
              <EchartsMap />
            </Col>
            <Col span={9}>
              <Ranking></Ranking>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};
